<template>
	<view>
		<view class="selectMission">
			<view class="select">
				<view class="title">选择任务平台</view>
				<view class="body">
					<view v-for="(item, index) in platformList" :key="index" :class="[{ item }, { platformStyle: platformStyle == index }]" @click="selectPlatform(index)">
						{{ item.text }}
					</view>
				</view>
			</view>
			<view class="select">
				<view class="title">选择任务类型</view>
				<view class="body">
					<view v-for="(item, index) in classList" :key="index" :class="[{ item }, { classStyle: classStyle == index }]" @click="selectClass(index)">
						{{ item.text }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="missionTitle">
			<text style="color: red;padding-right:10px;">*</text>
			<input v-model.trim="fromData.task_name" class="task_name" placeholder="请输入抖音昵称" placeholder-style="color: #B3B3B3;" />
			<!-- <input type="text" v-model.trim="fromData.task_name" placeholder="输入抖音昵称" placeholder-style="color: #B3B3B3;" /> -->
		</view>

		<view class="missionDetail">
			<view class="itemDetail">
				<view class="itemCenter">
					<text style="color: red;display: inline-block;padding-right:10px;">*</text>
					<input v-if="fixation" @input="getPrice" type="text" v-model.trim="fromData.price" placeholder="单项佣金" placeholder-style="color: #B3B3B3;" disabled />

					<input v-else @input="getPrice" type="text" v-model.trim="fromData.price" placeholder="单项佣金   最低¥1" placeholder-style="color: #B3B3B3;" />
				</view>
			</view>
			<view class="itemDetail">
				<view class="itemCenter">
					<text style="color: red;padding-right:10px;">*</text>
					<input v-if="fixation" @input="getPrice" type="text" v-model.trim="fromData.num" placeholder="需求任务量" placeholder-style="color: #B3B3B3;" disabled />
					<input v-else @input="getPrice" type="text" v-model.trim="fromData.num" placeholder="需求任务量" placeholder-style="color: #B3B3B3;" />
				</view>
			</view>
			
			<view class="itemDetail">
				<view class="itemCenter">
					<text style="color: red;padding-right:10px;">*</text>
						<input style="width: 500rpx;" type="text" v-model.trim="fromData.work_url" placeholder="作品链接" placeholder-style="color: #B3B3B3;" />
				</view>
			</view>
			
			<view class="itemDetail">
				<view class="itemLeft">
					<text>是否加急(需额外支付</text>
					<text style="color: red;">¥5</text>
					<text>元)</text>
				</view>
				<view @click="changeSelecte" class="itemRight">
					<image v-if="showPitch" src="/static/images/pitch-on.png"></image>
					<image v-else src="/static/images/unselected.png"></image>
				</view>
			</view>
		</view>
		
		<view v-if="setMealList.length">
			<view class="recommend">为您以下推荐套餐搭配</view>

			<view class="setMeal">
				<view v-for="(item,index) in setMealList" :key="index" class="setMealItem">
					<view style="color: #B3B3B3;" class="setMealLeft">
						<text>{{ item.num }}个</text>
						<text>{{ classText }}套餐</text>
					</view>
					<view class="setMealRight">
						<text style="text-decoration: line-through;color: #B3B3B3;">¥{{ item.market_price }}</text>
						<text>¥{{ item.price }}</text>
						<view @click="selectMeal(item)">
							<image v-if="item.checked" src="/static/images/pitch-on.png"></image>
							<image v-else src="/static/images/unselected.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="exclusiveList.length">
			<view class="recommend">福利套餐</view>
		
			<view class="setMeal">
				<view v-for="(item,index) in exclusiveList" :key="index" class="setMealItem">
					<view style="color: #B3B3B3;" class="setMealLeft">
						<!-- <text v-if="item.platform == 'douyin'">抖音</text>
						<text v-else-if="item.platform == 'kuaishouo'">快手</text>
						<text v-else>小红书</text>
						{{ item.num }}个
						<text v-if="item.type == 1">关注</text>
						<text v-else-if="item.type == 2">点赞</text>
						<text v-else>直播互动</text>
						套餐 -->
						
						<text>{{ item.num }}个</text>
						<text>{{ classText }}套餐</text>
					</view>
					<view class="setMealRight">
						<text style="text-decoration: line-through;color: #B3B3B3;">¥{{ item.market_price }}</text>
						<text>¥{{ item.price }}</text>
						<view @click="selectWelfare(item,index)">
							<image v-if="item.checked" src="/static/images/pitch-on.png"></image>
							<image v-else src="/static/images/unselected.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="taskTime">
			<view @click="openDatetimeStart" class="taskTimeItem">
				<input placeholder-style="color: #B3B3B3;" placeholder="请输入活动开始时间（必填）" disabled type="text" v-model="fromData.start_time" />
			</view>
			<view @click="openDatetimeEnd" class="taskTimeItem">
				<input placeholder-style="color: #B3B3B3;" placeholder="请输入活动截止时间（选填）" disabled type="text" v-model="fromData.end_time" />
			</view>
			<simple-datetime-picker ref="myStartPicker" @submit="handleStart" :start-year="2000" :end-year="2030" color="red"></simple-datetime-picker>
			<simple-datetime-picker ref="myEndPicker" @submit="handleEnd" :start-year="2000" :end-year="2030" color="red"></simple-datetime-picker>
		</view>

		<view class="taskDescribe">
			<view class="describeFont"><textarea v-model="fromData.description" placeholder="输入活动描述并上传审核示例图片" placeholder-style="color: #B3B3B3;" /></view>

			<view class="photoList">
				<view @click="changePhoto" class="taskPhoto">
					<image src="/static/images/add-picture.png"></image>
				</view>
				<block v-for="(image, index) in fromData.pics" :key="index">
					<view class="taskPhoto">
						<image @click="delect(index)" class="delete" src="/static/img/delete_img.png"></image>
						<image @click="previewImage(index)" :src="image"></image>
					</view>
				</block>
			</view>
			
		</view>

		<view class="taskPayment">
			<view class="paymentPrice">
				<text>需支付</text>
				<text style="color: red;">¥ {{ fromData.amount ? fromData.amount : 0 }}</text>
				<text>元</text>
			</view>
			<view @click="submit" class="paymentBtn">支付并发布任务</view>
		</view>
	</view>
</template>

<script>
import simpleDatetimePicker from '@/components/simple-datetime-picker.vue';
export default {
	components: {
		simpleDatetimePicker
	},
	data() {
		return {
			platformList: [
				{
					text: '抖音',
					spell: 'douyin'
				},
				// {
				// 	text: '快手',
				// 	spell: 'kuaishou'
				// },
				// {
				// 	text: '小红书',
				// 	spell: 'xiaohongshu'
				// }
			],
			classList: [
				{
					text: '关注'
				},
				{
					text: '点赞'
				},
				{
					text: '直播互动'
				}
			],
			platformStyle: 0,
			classStyle: 0,
			number: 0,
			showPitch: false,
			picsItem: null,
			fromData: {
				platform: 'douyin', // 平台
				type: 1, // 类型
				task_name: '', // 标题
				price: '', // 佣金
				num: '', // 任务数量
				work_url: '', // 作品链接
				work_num:'',// 作品Id
				is_urgent: 0, // 是否加急
				combination_id:'', // 套餐Id
				start_time: '', // 开始时间
				end_time: '', // 截止时间
				description: '', // 任务描述
				amount: '', // 支付价格
				pics: [], // 图片
				user_combination_id: 0 //福利id
			},
			setMealList:[],// 套餐列表
			exclusiveList:[],// 福利列表
			fixation:0,
			taskId:'', // 任务id
			classText:'关注'
		};
	},
	onLoad() {
		this.getExclusiveSet('douyin','1')
		this.getSetMeal('douyin','1')
	},
	watch:{
		'fromData.work_url':  function(newValue) {
			this.fromData.work_url = this.fromData.work_url.replace(/[\u4e00-\u9fa5]/g,"")
			this.fromData.work_url = this.fromData.work_url.replace(/，|！|#/g,"").trim()
		},
	},
	methods: {
		// 重置表单
		reset() {
			this.fixation = 0
			this.fromData.task_name = '', // 标题
			this.fromData.price = '', // 佣金
			this.fromData.num = '', // 任务数量
			this.fromData.work_num ='',// 作品Id
			this.fromData.is_urgent = 0, // 是否加急
			this.fromData.combination_id ='', // 套餐Id
			this.fromData.start_time = '', // 开始时间
			this.fromData.end_time = '', // 截止时间
			this.fromData.description = '', // 任务描述
			this.fromData.amount = '', // 支付价格
			this.fromData.pics = [], // 图片
			this.fromData.user_combination_id = 0 //福利id
		},
		// 获取福利套餐列表
		getExclusiveSet(platform,type) {
			this.$api.getExclusiveSet({
				platform,
				type
			},res => {
				this.exclusiveList = res.data.combination
				this.exclusiveList.forEach(item => {
					item.checked = 0
				})
			})
		},
		// 获取套餐列表
		getSetMeal(platform,type) {
			this.$api.getSetMeal({
				platform,
				type
			},res => {
				this.setMealList = res.data.combination
			})
		},
		// 计算总价
		calculate() {
			if (this.showPitch) {
				this.fromData.amount = this.fromData.price * this.fromData.num + 5;
			} else {
				this.fromData.amount = this.fromData.price * this.fromData.num;
			}
		},
		// 监听输入框 计算支付价格
		getPrice() {
			this.calculate();
		},

		// 选择平台
		selectPlatform(index) {
			if(this.platformStyle == index) return
			this.platformStyle = index;
			this.fromData.platform = this.platformList[index].spell;
			this.reset()
			this.getSetMeal(this.fromData.platform,this.fromData.type)
			this.getExclusiveSet(this.fromData.platform,this.fromData.type)
		},
		// 选择任务类型
		selectClass(index) {
			if(this.classStyle == index) return
			this.classStyle = index;
			this.fromData.type = index + 1;
			this.classText = this.classList[index].text
			this.reset()
			this.getSetMeal(this.fromData.platform,this.fromData.type)
			this.getExclusiveSet(this.fromData.platform,this.fromData.type)
		},
		getTitle() {
			this.number = this.fromData.task_name.length;
		},

		// 选中加急选项
		changeSelecte() {
			this.showPitch = !this.showPitch;
			if (this.showPitch) {
				this.fromData.is_urgent = 1;
			} else {
				this.fromData.is_urgent = 0;
			}
			this.calculate();
		},
		
		// 选中套餐
		selectMeal(item) {
			if (item.checked == 1) {
				item.checked = 0;
				this.fixation = 0;
				this.fromData.price = '';
				this.fromData.num = '';
				this.fromData.combination_id = '';
			} else {
				item.checked = 1;
				this.fixation = 1;
				this.setMealList.forEach(setMea => {
					if (setMea.combination_id !== item.combination_id) {
						setMea.checked = 0;
					}
				});
				this.exclusiveList.forEach(welfare => {
					welfare.checked = 0;
				});
				this.fromData.price = item.price / item.num ;
				this.fromData.num = item.num;
				this.fromData.combination_id = item.combination_id;
				this.fromData.user_combination_id = 0;
			}
			this.calculate();
		},
		
		// 选中福利套餐
		selectWelfare(item, index) {
			if (item.checked == 1) {
				item.checked = 0;
				this.fixation = 0;
				this.fromData.price = '';
				this.fromData.num = '';
				this.fromData.combination_id = '';
				this.fromData.user_combination_id = 0;
			} else {
				item.checked = 1;
				this.fixation = 1;
				this.exclusiveList.forEach((welfare, welfareIndex) => {
					if (welfareIndex !== index) {
						welfare.checked = 0;
					}
				});
				this.setMealList.forEach(setMea => {
					setMea.checked = 0;
				});
				this.fromData.price = item.price / item.num;
				this.fromData.num = item.num;
				this.fromData.combination_id = '';
				this.fromData.user_combination_id = item.user_combination_id;
			}
			this.calculate();
			this.$forceUpdate();
		},

		// 打开picker开始时间
		openDatetimeStart() {
			this.$refs.myStartPicker.show();
		},
		// 截止时间
		openDatetimeEnd() {
			this.$refs.myEndPicker.show();
		},
		// 监听开始时间
		handleStart(e) {
			this.fromData.start_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
		},
		// 监听截止时间
		handleEnd(e) {
			this.fromData.end_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
		},

		// 上传图片
		changePhoto() {
			this.$api.uploadImage(2, res => {
				this.fromData.pics = this.fromData.pics.concat(res.data.path);
			});
		},
		// 删除图片
		delect(index){
			uni.showModal({
				title: "提示",
				content: "是否要删除该图片",
				success: (res) => {
					if (res.confirm) {
						this.fromData.pics.splice(index, 1)
					}
				},
			})
		},
		
		//预览图片
		previewImage(index) {
			uni.previewImage({
				current: index,
				urls: this.fromData.pics,
				})
		},


		// 支付
		submit() {
			if(!this.fromData.task_name) {
				this.$common.errorToShow('请输入任务标题')
				return
			}
			if(!this.fromData.user_combination_id) {
				if(!this.fromData.price) {
					this.$common.errorToShow('请输入佣金')
					return
				}
				if(this.fromData.price < 1) {
					this.$common.errorToShow('佣金最低为¥1')
					return
				}
			}
			if(!this.fromData.num) {
				this.$common.errorToShow('请输入任务数量')
				return
			}
			if(this.fromData.num == 0) {
				this.$common.errorToShow('任务数量不能为零')
				return
			}
			if(!this.fromData.work_url) {
				this.$common.errorToShow('请输入作品链接')
				return
			}
			if (/[\u4E00-\u9FA5]/g.test(this.fromData.work_url)) {
				this.$common.errorToShow('作品链接中不能含有汉子')
				return
			 }
			this.fromData.work_url = this.fromData.work_url.substr(0,this.fromData.work_url.length - 1)
			// if(!this.fromData.work_num) {
			// 	this.$common.errorToShow('请输入作品Id')
			// 	return
			// }
			// if(this.fromData.work_num.length !== 19) {
			// 	this.$common.errorToShow('请输入19位正确的作品Id')
			// 	return
			// }
			if(!this.fromData.start_time) {
				this.$common.errorToShow('请输入任务开始时间')
				return
			}
			this.$api.submitPayment(this.fromData, res => {
				if (this.fromData.amount == 0) {
					this.$common.successToShow('支付成功');
					uni.redirectTo({
						url:'/pages/users/mission_list/mission_list?issue=1'
					});
					return;
				}
				if(res.status == 200) {
					this.taskId = res.data.task_id
					uni.redirectTo({
					    url: `/pages/users/user-pay/user-pay?id=${this.taskId}&price=${this.fromData.amount}`
					});
				}else {
					this.$common.errorToShow(res.message)
				}
			});
		}
	}
};
</script>

<style lang="less">
.selectMission {
	height: 333rpx;
	background-color: #ffffff;
	padding: 20rpx;
	margin-bottom: 20rpx;
	.select {
		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #272727;
			margin-bottom: 20rpx;
		}
		.body {
			display: flex;
			justify-content: space-between;
			margin-bottom: 35rpx;
			.item {
				width: 200rpx;
				height: 60rpx;
				background-color: #f5f5f5;
				border-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;
				color: #999999;
			}
			.platformStyle,
			.classStyle {
				color: #ffffff;
				background: linear-gradient(-90deg, #ff7340, #f4a424);
			}
		}
	}
}

.missionTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	background-color: #ffffff;
	height: 100rpx;
	margin-bottom: 20rpx;
	.task_name {
		width: 100%;
		height: 100rpx;
	}
}

.missionDetail {
	height: 393rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	.itemDetail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #e6e6e6;
		height: 25%;
		.itemLeft {
			font-size: 30rpx;
			color: #b3b3b3;
		}
		.itemCenter {
			display: flex;
		}
		.itemRight {
			width: 45rpx;
			height: 45rpx;
			border-radius: 50%;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	.itemDetail:last-child {
		border-bottom: none;
	}
}

.recommend {
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	margin: 20rpx 0;
	padding-left: 20rpx;
}

.setMeal {
	background-color: #ffffff;
	margin-bottom: 20rpx;
	.setMealItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #e6e6e6;
		.setMealRight {
			display: flex;
			align-items: center;
			text {
				font-size: 24rpx;
			}
			text:nth-child(2) {
				font-size: 30rpx;
				font-weight: bold;
				color: #ff0000;
				margin-left: 20rpx;
				margin-right: 30rpx;
			}
			view {
				width: 45rpx;
				height: 45rpx;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
	}
}

.taskTime {
	background-color: #ffffff;
	margin-bottom: 20rpx;
	.taskTimeItem {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #e6e6e6;
		input {
			width: 100%;
		}
	}
}

.taskDescribe {
	height: 300rpx;
	background-color: #ffffff;
	padding: 20rpx;
	margin-bottom: 170rpx;
	.describeFont {
		textarea {
			width: 100%;
			height: 150rpx;
		}
	}
	.photoList {
		display: flex;
		margin-top: 15rpx;
		.taskPhoto {
			position: relative;
			width: 105rpx;
			height: 105rpx;
			margin-right: 10rpx;
			.delete {
				position: absolute;
				top: -15rpx;
				right: -15rpx;
				width: 20rpx;
				height: 20rpx;
				z-index: 10;
			}
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.taskPayment {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 150rpx;
	background: #ffffff;
	box-shadow: 0px -5px 10px 0px rgba(227, 227, 227, 0.6);
	color: #b3b3b3;
	font-size: 32rpx;
	padding: 0 20rpx;
	.paymentBtn {
		width: 300rpx;
		height: 88rpx;
		background: linear-gradient(-90deg, #ff7340, #f4a323);
		border-radius: 44rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
	}
}
</style>
